<style>
    .containerBox{
        position: relative;
    }
    .hmNavItem{
        cursor: pointer;
        width: 234px;
        height: 496px;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
        position:absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        padding: 10px 0;
        background: rgba(0, 0, 0, .5);
    }
    .hmNavItem li{
        line-height: 26px;
        position: relative;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .hmNavItem li:hover{
        background: #ea5404;
    }
    .hmNavItem li a{
        color: #f9f9f9;
    }
    .hmNavItem i{
        float: right;
	    font-size: 20px;
	    position: absolute;
	    right: 20px;
	    top: 4px;
    }
    .hmNavCont {
        position: absolute;
        left: 234px;
        top: 0;
        width: 600px;
        height: 496px;
        background: #ffffff;
        overflow: hidden;
        display: none;
        border: 1px solid #e8e8e8;
        box-sizing: border-box;
    }
    .hmNavContItem{
        padding-left: 20px;
        padding-top: 11px;
    }
    .hmNavContItem .hmH5{
        margin-bottom: 20px;
        line-height: 1;
    }
    .hmNavContPub li{
        margin-right: 16px;
        margin-bottom: 17px;
        float:  left;
        line-height: 1;
    }
    .hmNavItemBox{
        position: relative;
        z-index: 10;
    }
    ul.hmAllOther{
        background: #fff;
        /*left: 164px;*/
        left: 0;
        border: 1px solid #ea5404;
        height: auto;
        color: #666;
    }
    ul.hmAllOther a{
        color: #666;
    }
    ul.hmAllOther > li:hover a{
        color: #f9f9f9;
    }
    .hmAllOtherAfter:after{
        content: '';
        display: block;
        width: 185px;
        height: 61px;
        left: 164px;
        top: -61px;
        position: absolute;
    }
    div.hmAllCont{
        /*left: 398px;*/
        left: 234px;
    }
</style>
<script>
    $(function () {
        // 全部类的导航
        var url1 = location.href.split("?")[0].split("/").pop();
        console.log(url1);
        if (url1 != "index.html") {
//          $(".newHeadNav").find("li:first-child").show();
            $(".hmNavItem").addClass("hmAllOther").hide();
            $(".hmNavCont").addClass("hmAllCont");
          	$(".hmNavItemBox").addClass("hmAllOtherAfter");
        }else {
            $(".newHeadNav").find("li:first-child").hide();
        }

        // vue初始化实例
        var nav = new Vue({
            el: "#navArr",
            data: {
                navArr:[],
                navItem:[],
            },
            methods: {
                getId: function (event) {
                    var obj = event.target;
                    var navId = obj.getAttribute("id");
                    gerItem(nav,navId);
                }
            }
        });

        // 获取大类
        $.ajax({
            url: SURL + "goodsCats/selectFirstCat",
            success: function (data) {
                nav.navArr = data.entity;
            }
        });

        // 存储jQuery元素变量
        var $obj = $(".hmNavItemBox");

        // 鼠标悬浮、离开事件
        $obj.mouseenter(function (e) {
            if (url1 != "index.html") {
                $(this).find(".hmNavItem").show();
                $(this).find(".hmNavCont").outerHeight($(this).find(".hmNavItem").outerHeight());
            }
            $(this).find(".hmNavCont").show();
        });
        $obj.mouseleave(function () {
            if (url1 != "index.html") {
                $(this).find(".hmNavItem").hide();
            }
            $(this).find(".hmNavCont").hide();
        });

        // 获取大类里的子类
        function gerItem(nav,navId){
            $.ajax({
                url: SURL + "goodsCats/selectByGoodsInfo/" + navId,
                success: function (data) {
                    nav.navItem = data.entity;
                    // console.log(data)
                }
            })
        }

    });
</script>
<div id="navArr" class="containerBox fontBase">
    <div class="hmNavItemBox">
        <ul class="hmNavItem">
            <!--<li>女装/男装/内衣内裤<i class="fa fa-angle-right"></i></li>-->
            <li v-for="arr in navArr" :id="arr.catId" @mouseenter="getId">
                <a :href="'../second/second.html?catId='+arr.catId">
                    {{arr.catName}}
                    <i class="fa fa-angle-right"></i>
                </a>
            </li>
        </ul>
        <div class="hmNavCont">
            <!--<div class="hmNavContItem">
                <h5 class="hmH5"><a href="">女装</a></h5>
                <ul class="hmNavContPub">
                    <li><a href="">连衣裙</a></li>
                    <li><a href="">短裤</a></li>
                    <li><a href="">T恤</a></li>
                    <li><a href="">半身裙</a></li>
                    <li><a href="">卫衣</a></li>
                </ul>
            </div>-->
            <div class="hmNavContItem" v-for="item in navItem">
                <h5 class="hmH5"><a :href="'../second/second.html?catId='+item.catId">{{item.catName}}</a></h5>
                <ul class="hmNavContPub clearFix">
                    <li v-for="item2 in item.childs"><a :href="'../second/second.html?catId='+item2.catId">{{item2.catName}}</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--TODO:基本功能已弄完,还可以优化一下-->